<template>
	<view>
		<view class="header">
			<view class="header-b">
				<view @tap="$back()"><image src="../../static/stock/left.png" mode=""></image></view>
				<view class="">供应商对账</view>
			<image src="" mode=""></image>
			</view>
		</view>
		<view class="seach">
			<view class="seach-s" @confirm="confirm">
				<image src="../../static/images/tb_search.png" mode="aspectFit" @confirm="confirm"></image>
				<input type="text" value="" placeholder="请输入关键词..."  placeholder-class="f28 c999" v-model="name" @confirm="confirm"confirm-type="search" />
			</view>
		</view>
<view class="tabbar">
	<view class="tabbar-one">
		<view class="tabbar-t">
			{{supplierList.length}}
		</view>
		<view class="tabbar-b">
			全部供应商
		</view>
	</view>
    <view class="tabbar-one">
    	<view class="tabbar-t">
    		{{supplierList.length}}
    	</view>
    	<view class="tabbar-b">
    		应付供应商
    	</view>
    </view>
	<view class="tabbar-one">
		<view class="tabbar-t">
			{{total}}
		</view>
		<view class="tabbar-b">
			应付金额
		</view>
	</view>
	
</view>
	
		<view class="box" v-for="(item,index) in supplierList" :key="index">
		<view class="f30 c333">
			{{item.name}}
		</view>	
		<view class="box-r f28" style="color: #F64444;">
			¥{{item.debt}}
		</view>
		</view>
		<!-- 暂无数据 -->
		<view class="ima" v-if="supplierList.length == 0"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode="aspectFit"></image></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:0,//应付金额
				name:'',
				supplierList:[],
				goodsList:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			//供应商对账
			getList(){
				let that=this;
				that.$ajax('api/v1.supplier/index',{
					
				}).then(res=>{
					if(res.code==1){
						that.goodsList=that.supplierList=res.result.list;
						that.goodsList.forEach(item => {
							that.total += +item.debt;
						})
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			},
			confirm: function() {
				this.supplierList = this.goodsList.filter(item => {
					return item.name == this.name;
				});
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header {
	width: 750rpx;
	background: #249AF6;
	.header-b {
		display: flex;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		justify-content: space-between;
		color: #ffffff;
		padding:60rpx 30rpx 0 30rpx;
		image {
			width: 21rpx;
			height: 38rpx;
		}
		.more {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}

	.header-s {
		width: 143rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 48rpx;
	}
}
.seach {
	width: 750rpx;
	background: #249AF6;
	padding-left: 32rpx;
	display: flex;
	padding-bottom: 25rpx;
	.seach-s {
		width: 700rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		padding-left: 27rpx;
		display: flex;
        margin-top: 30rpx;
		box-sizing: border-box;
		input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			border-style: none;
			font-size: 28rpx;
			color: #999;
			padding-right: 20rpx;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 12rpx;
			margin-left: 10rpx;
		}
	}
}
.tabbar{
	height: 162rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content:space-between;
	padding: 40rpx 0;
	box-sizing: border-box;
	text-align: center;
	.tabbar-one{
		width: 33.3333%;
		font-size:32rpx;
		color:#333;
		border-right: 2rpx solid #ddd;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		&:last-child{
			border-right: none;
		}
		.tabbar-b{
			font-size:28rpx;
			color:#666;
		}
	}
	
}
.box{
	margin-top: 20rpx;
	height: 109rpx;
	line-height: 109rpx;
	display: flex;
	justify-content: space-between;
	background-color: #FFFFFF;
	padding: 0 32rpx;
	font-size:32rpx;
	font-family:PingFang SC;
	font-weight:500;
	border-bottom: 3rpx solid #eeeeee;
	
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
	image {
		width: 370upx;
		height: 390upx;
	}
}

</style>
